<template>
  <div class="pipeline-info">
    <NavTitle title="流水线信息" />
    <div class="right-form">
      <a-form ref="formRef" name="advanced_search" label-align="right" :model="formState">
        <a-row :gutter="24">
          <a-col :span="10" :push="1">
            <a-form-item label="流水线名称" name="name" :rules="[{ required: true, message: '请选择流水线名称' }]">
              <a-input v-model:value="formState.name" placeholder="请输入流水线名称" :disabled="isView" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="10" :push="3">
            <a-form-item label="流水线ID">
              <a-input v-model:value="formState.code" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="10" :push="1">
            <a-form-item label="所属项目" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.projectName" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="10" :push="3">
            <a-form-item label="所属环境" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.environmentName" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="10" :push="1">
            <a-form-item label="关联应用" :rules="[{ required: true, message: '请输入' }]">
              <a-input v-model:value="formState.applicationName" placeholder="自动获取" :disabled="true" allowClear />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { usePipelineStore } from '@/store/modules/pipeline';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { PipelineOperationTypeCode } from '@/enums/pipelineEnum';
const counterStore = usePipelineStore();
const { baseInfo } = storeToRefs(counterStore);
const { setBaseInData } = counterStore;
const dataObject = ref<any>(cloneDeep(baseInfo));
const getBaseInfoData = computed(() => {
  return baseInfo.value;
});
const route = useRoute();
const isView = computed(() => route.params.type == PipelineOperationTypeCode.info);
const formRef = ref<any>(null);
const formState = reactive<Pipeline.BaseInfo>({
  name: '',
  code: '',
  projectName: '',
  projectCode: '',
  environmentName: '',
  environmentUuid: '',
  applicationName: '',
  applicationCode: '',
});

watch(
  getBaseInfoData,
  (newVal) => {
    if (Object.keys(newVal).length > 0) {
      dataObject.value = cloneDeep(newVal);
      formState.name = dataObject.value.name;
      formState.code = dataObject.value.code;
      formState.projectName = dataObject.value.projectName;
      formState.projectCode = dataObject.value.projectCode;
      formState.environmentName = dataObject.value.environmentName;
      formState.environmentUuid = dataObject.value.environmentUuid;
      formState.applicationName = dataObject.value.applicationName;
      formState.applicationCode = dataObject.value.applicationCode;
    }
  },
  {
    immediate: true,
  },
);

watch(formState, (newVal) => {
  if (newVal) {
    setBaseInData({
      ...counterStore.getBaseInfoData,
      ...newVal,
    });
  }
});
</script>

<style scoped lang="less">
.pipeline-info {
  width: 100%;
}
.right-form {
  padding-top: 20px;
}
.tag-select {
  display: flex;
  flex-wrap: nowrap;
}

.color-select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
  .color-item {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 16px;
  }
}
:deep(.ant-form-item-label) {
  text-align: right;
  width: 100px;
}
</style>
